<template>
  <div>
    <h2>Child3-----{{ wct }}</h2>
    <button @click="wct++">wct++</button>
  </div>
</template>

<script setup lang='ts'>
import { ref, watch } from 'vue'
/*
  watch() is lazy by default - i.e. the callback is only called when the watched source has changed.
  The first argument is the watcher's source. The source can be one of the following:
    A getter function that returns a value
    A ref
    A reactive object
    ...or an array of the above.
*/
const wct = ref<number>(0)
watch<number>(wct, (newWct, preWct) => {
  console.log(newWct, preWct);

})
</script>
<style lang='less' scoped>
</style>